<template>
	<div class="add-user">
		<div class="item">
			<div class="label">姓名</div>
			<input type="text" v-model="form.realName" placeholder="请输入姓名">
		</div>
		<div class="item">
			<div class="label">登录手机号</div>
			<input type="text" v-model="form.account" @blur="accountBlur" placeholder="请输入手机号">
		</div>
		<div class="item">
			<div class="label">身份证号</div>
			<input type="text" v-model="form.idCard"  @blur="idCardBlur"  placeholder="请输入身份证号">
		</div>
		<div class="item">
			<div class="label">性别</div>
			<input type="text" v-model="form.sex" disabled @click="show = true" placeholder="请选择性别">
		</div>
		<div class="item">
			<div class="label">年龄</div>
			<input type="text" v-model="form.age" placeholder="请输入年龄">
		</div>
		<div class="item">
			<div class="label">健康管理师</div>
			<span>{{userInfo.realName}}</span>
		</div>
		<div class="tips">
			<p>*用户初始登录密码为xyyf12580</p>
			<p>注册会员后，及时通知会员初次登录并更改初始密码</p>
		</div>
		<div class="btn" @click="save">注册会员并绑定健康管理师</div>
		<div :class="['t',ischeck?'t-checked':'']" @click="ischeck = !ischeck"><i></i><text>用户已阅读同意<span>《用户服务协议》《隐私政策》 《健康管理知情同意书》</span></text></div>
		<u-modal v-model="showModal" title="新增会员确认" confirm-text="确认新增" :show-cancel-button="true" @confirm="Modalconfirm" >
			<view class="slot-content">
				<p>登录手机号：{{form.account}}</p>
				<p>姓名：{{form.realName}}</p>
				<p>身份证号：{{form.idCard || '未填写'}}</p>
				<span>信息确认后将无法修改</span>
			</view>
		</u-modal>
		<u-select v-model="show" @confirm="confirm" :list="sexArr"></u-select>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				userInfo:{},
				ischeck:false,
				form:{},
				showModal:false,
				show:false,
				sexArr: [
					{value:1,label:'男'},
					{value:2,label:'女'},
				],
			}
		},
		onLoad(){
			this.userInfo = JSON.parse(localStorage.userInfo)
		},
		methods:{
			// 选择确认按钮
			confirm(e) {
				this.form.sex = e[0].label
			},
			accountBlur(){
				var phoneReg = /^1[3456789]\d{9}$/;
				if(!phoneReg.test(this.form.account)){
					uni.showToast({
						title: '请填写正确手机号码',
						icon:'none'
					})
				    return false; 
				}
				this.$api.verifyMobile(this.form.account).then((res)=>{
					if(res.data.returnCode == 20004){
						uni.showToast({
							title: res.data.message,
							icon:'none'
						})
						this.isHasPhone = true
						return;
					}
					this.isHasPhone = false
				})
			},
			getIDChar18(id) {
			    var arr = id.split(''), sum = 0, vc = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
			    for (var i = 0; i < 17; i++) sum += vc[i] * parseInt(arr[i]);
			    return ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'][sum % 11];
			},
			idCardBlur(){
				const _this = this
				if (!(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/.test(_this.form.idCard))) {
					uni.showToast({
						title: '请填写正确的身份证号码',
						icon:'none'
					})
					return;
				}
				var c = _this.form.idCard.charAt(17), rc = _this.getIDChar18(_this.form.idCard);
				if (c != rc){
					uni.showToast({
						title: '请填写正确的身份证号码',
						icon:'none'
					})
					return; 
				}
			},
			Modalconfirm(){
				var birthday = ''
				if(this.form.idCard){
					if(this.form.idCard.length == 15){
						birthday = "19"+this.form.idCard.substr(6,6);
					} else if(this.form.idCard.length == 18){
						birthday = this.form.idCard.substr(6,8);
					}
					this.form.birthday = birthday.substr(0,4)+'-'+birthday.substr(4,2)+'-'+birthday.substr(6)
				}
				this.form.sex = this.form.sex == '男'?1:2
				this.form.age = Number(this.form.age)
				this.$api.addPersonnel(this.form).then((res)=>{
					if(res.data.returnCode == 200){
						uni.navigateTo({
							url: '/pages/quickly/user/record'
						})
					}else{
						uni.showToast({
							title: res.data.message,
							icon:'none'
						})
					}
				})
			},
			save(){
				const _this = this
				var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
				var phoneReg = /^1[3456789]\d{9}$/;
				if(!this.form.realName){
					uni.showToast({
						title: '请输入姓名',
						icon:'none'
					})
					return;
				}
				if(!this.form.account){
					uni.showToast({
						title: '请输入登录手机号',
						icon:'none'
					})
					return;
				}
				if(!phoneReg.test(this.form.account)){
					uni.showToast({
						title: '请填写正确手机号码',
						icon:'none'
					})
					return;
				} 
				if(this.isHasPhone){
					uni.showToast({
						title: '该手机号已注册！',
						icon:'none'
					})
					return;
				}
				if(_this.form.idCard){
					if (!(/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X|x)$/.test(_this.form.idCard))) {
						uni.showToast({
							title: '请填写正确的身份证号码',
							icon:'none'
						})
						return;
					}
					var c = _this.form.idCard.charAt(17), rc = _this.getIDChar18(_this.form.idCard);
					if (c != rc){
						uni.showToast({
							title: '请填写正确的身份证号码',
							icon:'none'
						})
						return; 
					}
				}
				if(!this.form.sex){
					uni.showToast({
						title: '请选择性别',
						icon:'none'
					})
					return;
				}
				if(!this.form.age){
					uni.showToast({
						title: '请填写年龄',
						icon:'none'
					})
					return;
				}
				if(!this.ischeck){
					uni.showToast({
						title: '请先同意服务条款',
						icon:'none'
					})
					return;
				}
				this.showModal = true
				this.showContent = ''
			}
		}
	}
</script>
<style lang="scss" scoped>
	.add-user{
		min-height: 100vh;
		background: #F8F8F8;
		.item{
			background: #fff;
			display: flex;
			height: 110upx;
			border-bottom: 1upx solid #E7E7E7;
			align-items: center;
			.label{
				font-size: 30upx;
				margin-left: 25upx;
				min-width: 25vw;
			}
			input{
				flex:1;
			}
			span {
				font-weight: bold;
				color: #333333;
				font-size: 30upx;
			}
		}
		.tips{
			margin-top: 50upx;
			padding: 0 25upx;
			font-weight: bold;
			line-height: 1.8;
		}
		.btn{
			width: 486upx;
			height: 70upx;
			text-align: center;
			line-height: 70upx;
			border-radius:70upx;
			color: #fff;
			font-size: 30upx;
			margin:150upx auto 0;
			background: #38CB97;
		}
		.t{
			width: 486upx;
			margin: 23upx auto 0;
			display: flex;
			font-size: 22upx;
			align-items:baseline;
			text{
				flex:1;
			}
			i{
				width: 18upx;
				height: 18upx;
				margin-right: 10upx;
				display: inline-block;
				border:1upx solid #ccc;
			}
			span{
				color: #0066CC;
			}
		}
		.t-checked{
			i{
				background: url('@/static/img/quickly/user/ischeked.png');
				background-size:100% 100%;
			}
		}
		.slot-content{
			p{
				padding-left: 10%;
				font-size: 30upx;
				margin-top: 16upx;
				font-weight: bold;
			}
			span{
				display: block;
				text-align: center;
				font-size: 22upx;
				margin: 20upx 0;
			}
		}
	}
</style>
